<template>
  <div class="center">
    <!-- 头部 -->
    <div class="table_header flex flex_bet flex-wrap">
      <div class="table_button">
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="Refresh"></el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="openConsume">
          添加
        </el-button>
      </div>
      <div class="table_searchs flex felx_align">
        <div class="table_search flex">
          <el-input placeholder="搜索" v-model="searchTable" class="input-with-select" size="small">
            <el-select v-model="select" slot="prepend" placeholder="请选择" class="table_select" style="width:105px">
              <el-option label="账号" value="1"></el-option>
              <el-option label="昵称" value="2"></el-option>
              <el-option label="归属账号" value="3"></el-option>
              <el-option label="真实姓名" value="4"></el-option>
              <el-option label="所在城市" value="5"></el-option>
              <el-option label="教师资格证" value="6"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="idnameSearch"></el-button>
          </el-input>
        </div>
        <dynamicTable :checkboxVal="checkboxVal" @alter="alterCheckbok"/>
      </div>
    </div>
    <el-table stripe style="width: 100%" border fit highlight-current-row ref="tableDataRef" :data="tableData" :key="key" @sort-change="tableSortCge">
      <el-table-column v-if="colData[0].istrue" min-width="50" align="center" prop="id" label="ID" fixed></el-table-column>
      <el-table-column v-if="colData[1].istrue" min-width="100" align="center" prop="username" label="账号" fixed></el-table-column>
      <el-table-column v-if="colData[1].istrue" min-width="100" align="center" prop="nickname" label="昵称" fixed></el-table-column>
      <el-table-column v-if="colData[2].istrue" min-width="100" align="center" prop="teach_type" label="类别" fixed>
        <template slot-scope="scope">
          <span v-if="scope.row.teach_type===1">教师</span>
          <span v-else-if="scope.row.teach_type==4">观察员</span>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[3].istrue" min-width="100" align="center" prop="adminName" label="归属账号" fixed>
      </el-table-column>
      <el-table-column v-if="colData[4].istrue" min-width="100" align="center" prop="realname" label="真实姓名">
      </el-table-column>
      <el-table-column  min-width="130" align="center" prop="av_time" label="可用音视频时长">
        <template slot-scope="scope">
          <span>{{scope.row.av_time}} 分钟</span>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[5].istrue" min-width="100" align="center" prop="gender" label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.gender==1">男</span>
          <span v-else>女</span>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[6].istrue" min-width="100" align="center" prop="age" label="年龄"></el-table-column>
      <el-table-column v-if="colData[7].istrue" min-width="100" align="center" prop="city" label="所在城市"></el-table-column>
      <el-table-column v-if="colData[8].istrue" min-width="100" align="center" prop="education" label="学历">
        <template slot-scope="scope">
          <span v-if="scope.row.education==1">高中</span>
          <span v-else-if="scope.row.education==2">中专</span>
          <span v-else-if="scope.row.education==3">大专</span>
          <span v-else-if="scope.row.education==4">本科</span>
          <span v-else-if="scope.row.education==5">硕士</span>
          <span v-else-if="scope.row.education==6">博士</span>
          <span v-else-if="scope.row.education==7">博士后</span>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[9].istrue" min-width="100" align="center" prop="major" label="专业"></el-table-column>
      <el-table-column v-if="colData[10].istrue" min-width="100" align="center" prop="school" label="院校"></el-table-column>
      <el-table-column v-if="colData[11].istrue" min-width="100" align="center" prop="subject" label="擅长学科">
      </el-table-column>
      <el-table-column v-if="colData[12].istrue" min-width="100" align="center" prop="teacher_cert" label="教师资格证">
        <template slot-scope="scope">
          <span v-if="scope.row.teacher_cert==1">有</span>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[13].istrue" min-width="100" align="center" prop="sup_class_count" label="督学课时"></el-table-column>
      <el-table-column v-if="colData[14].istrue" min-width="100" align="center" prop="acc_class_count" label="伴学课时"></el-table-column>
      <el-table-column v-if="colData[15].istrue" min-width="100" align="center" prop="sub_exp" label="督学经验" sortable="custom"></el-table-column>
      <el-table-column v-if="colData[16].istrue" min-width="100" align="center" prop="acc_exp" label="伴学经验" sortable="custom"></el-table-column>
      <el-table-column v-if="colData[17].istrue" min-width="100" align="center" prop="residue" label="打赏值" sortable="custom"></el-table-column>
      <el-table-column v-if="colData[18].istrue" min-width="160" align="center" prop="create_time" label="创建时间" sortable="custom"></el-table-column>
      <el-table-column v-if="colData[18].istrue" min-width="160" align="center" prop="create_time" label="有效期至">
        <template slot-scope="scope">
          <div v-if="scope.row.remote_control===0">
            <span>未开通</span>
          </div>
          <div v-else>
            <p>{{ scope.row.remote_control_start_time | newDate }}</p>
            <p>{{ scope.row.remote_control_end_time | newDate }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[18].istrue" min-width="160" align="center" prop="login_time" label="最后登录时间" sortable="custom"></el-table-column>
      <el-table-column label="操作" min-width="240" align="center">
        <template slot-scope="scope">
          <el-row>
            <el-button size="mini" type="primary" @click="openEdit(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.is_freeze===0" size="mini" type="primary" @click="toFreeze(scope.row.id)">冻结
            </el-button>
            <el-button v-else size="mini" type="primary" @click="toUnfreeze(scope.row.id)">解冻</el-button>
            <el-button size="mini" @click="delContent(scope.row.id)">删除</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination :current-page.sync="listQuery.startSize" background @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :page-sizes="[10, 50, 100, 200]"
                     layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="listQuery.pageSize">
      </el-pagination>
    </div>
    <delete-Dialog title="" :visible.sync="deleteDialogs.show" width="25%" top="40vh" @deleteEvents="deleteEvents" :deleteText="deleteDialogs.deleteText"/>

  </div>
</template>

<script>
import objectable from "@/utils/objectable.js";
import dynamicTable from "@/components/DynamicTable/index";
import deleteDialog from "@/components/deleteDialog/index";
import tableMini from '@/utils/tableMini.js'
import permission from "@/directive/permission";
import {
  delTeacher, freezeTeacher,
  queryTeacherControl, unfreezeTeacher,
} from "@/api/teacher";

export default {
  mixins: [tableMini],
  components: {dynamicTable, deleteDialog},
  directives: {permission},
  data() {
    return {
      key: 1,
      colData: [], //动态控制table
      checkboxVal: ["ID", "账号", "昵称", "类别", "归属账号", "真实姓名", "性别", "年龄", "所在城市", "学历", "专业", "院校", "擅长学科", "教师资格证", "督学课时", "伴学课时", "督学经验", "伴学经验", "打赏值", "创建时间", "有效期", "最后登录时间"],
      searchTable: "",
      select: "", //搜索条件
      tableData: [],
      listQuery: {
        startSize: 1,
        pageSize: 10,
        userId: localStorage.getItem("ID"),
        username: undefined,
        nickname: undefined,
        adminName: this.$route.query.adminName,
        realname: undefined,
        city: undefined,
        teacher_cert: undefined,
        teach_type: this.$route.query.teacherType
      },
      addForm: {
        agent: '',
        count: '',
        teachType: ''
      },
      formVisible: false,
      rules: {
        agent: [{required: true, message: '请选择代理商', trigger: 'change'}],
        teachType: [{required: true, message: '请选择教师类别', trigger: 'change'}],
        count: [{required: true, message: '请输入数量', trigger: 'blur'}],
      },
      editSubjects: false,
      deleteDialogs: {
        show: false,
        deleteText: ',删除后不可恢复,请谨慎操作。若账号尚有剩余有效期,删除后有效期不可恢复或转移',
        deleteId: 0
      },
      batchArr: [],
      dialogVisible: false,
    }
  },
  created() {
    this.colData = objectable(this.checkboxVal, this.checkboxVal); //转为数组对象，好控制table
    this.queryTeacherControl()
  },
  methods: {
    Refresh() {
      this.listQuery = {
        startSize: 1,
        pageSize: 10,
        userId: localStorage.getItem("ID"),
        username: undefined,
        nickname: undefined,
        adminName: undefined,
        realname: undefined,
        city: undefined,
        teacher_cert: undefined
      }
      this.queryTeacherControl()
    },
    //搜索
    idnameSearch() {
      if (!this.select) return this.$message.warning("请先选择查询条件");
      this.listQuery = this.$options.data.call(this).listQuery
      this.listQuery.startSize = 1
      this.listQuery.pageSize = 10
      switch (this.select) {
        case '1':
          this.listQuery.username = this.searchTable
          this.queryTeacherControl();
          break;
        case '2':
          this.listQuery.nickname = this.searchTable
          this.queryTeacherControl();
          break;
        case '3':
          this.listQuery.adminName = this.searchTable
          this.queryTeacherControl();
          break;
        case '4':
          this.listQuery.realname = this.searchTable
          this.queryTeacherControl();
          break;
        case '5':
          this.listQuery.city = this.searchTable
          this.queryTeacherControl();
          break;
        case '6':
          this.listQuery.teacher_cert = this.searchTable
          this.queryTeacherControl();
          break;
      }
    },
    openEdit(row) {
      this.$router.push({name: 'supervisorsAdd', query: {id: row.id, isEdit: 1, teach_type: row.teach_type}});
    },

    queryTeacherControl() {
      queryTeacherControl(this.listQuery).then(res => {
        this.tableData = res.data
        this.total = res.total
      }).catch(err => {
        this.tableData = []
        this.total = 0
      })
    },
    delContent(id) {
      this.deleteDialogs.show = true
      this.deleteDialogs.deleteId = id
    },

    openConsume() {
      this.$router.push({name: 'supervisorsAdd', query: {isEdit: false, agentId: localStorage.getItem("ID")}})
    },
    //删除按钮事件
    deleteEvents() {
      let params = {
        userId: localStorage.getItem("ID"),
        last_ip: sessionStorage.getItem("Ip"),
        id: this.deleteDialogs.deleteId,
      }
      delTeacher(params).then(res => {
        this.queryTeacherControl()
      }).catch(err => {
        console.log("请求失败", err)
      })
    },
    //分页
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.queryTeacherControl()
    },
    handleCurrentChange(val) {
      this.listQuery.startSize = val
      this.queryTeacherControl()
    },
    //表格排序事件
    tableSortCge(column) {
      let order = ''
      column.order == "descending" ? order = 'desc' : order = 'asc'
      let sort = [{field: column.prop, sort: order}]
      this.listQuery.sort = JSON.stringify(sort)
      this.queryTeacherControl()
    },
    //下拉动态table子组件
    alterCheckbok(key, conte) {
      this.key = key;
      this.colData.filter(i => {
        if (conte.indexOf(i.title) != -1) {
          i.istrue = false;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        } else {
          i.istrue = true;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        }
      });
    },
    //编辑添加表单关闭事件
    addFormclose() {
      this.editSubjects = false
      this.$nextTick(() => {
        this.addForm = this.$options.data().addForm
      })
    },
    toFreeze(id) {
      this.$confirm('账号被冻结后将无法登录使用, 是否继续?', '冻结账号', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        freezeTeacher({
          teacherId: id,
          userId: localStorage.getItem("ID")
        }).then(res => {
          this.$message.success(res.msg)
          this.queryTeacherControl()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    toUnfreeze(id) {
      unfreezeTeacher({
        teacherId: id,
        userId: localStorage.getItem("ID")
      }).then(res => {
        this.$message.success(res.msg)
        this.queryTeacherControl()
      }).catch(err => {
        this.$message.error("解冻失败")
      })
    },

  }
}
</script>

<style scoped lang="scss">

.qrcode_box {
  display: flex;
  justify-content: center;
  align-items: center;

  .qrcode {
    width: 270px !important;
    height: 270px !important;
  }
}

</style>


